<template>
    <div class="reg-info">
        <div class="search-content">
            <el-input class="search-content-input" v-model="searchContent.goods_name" placeholder="请输入商品名称"></el-input>
            <el-input class="search-content-input" v-model="searchContent.store_name" placeholder="请输入所属店铺"></el-input>
			<el-input class="search-content-input" v-model="searchContent.user_name" placeholder="姓名"></el-input>
			<el-input class="search-content-input" v-model="searchContent.user_mobile" placeholder="电话"></el-input>
			<el-input class="search-content-input" v-model="searchContent.address" placeholder="地区"></el-input>
            <div class="putaway-time-wrapper">
                <span class="putaway-time-label">报名时间：</span>
                <el-date-picker
                    v-model="searchContent.putawayTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="resetSearchData">重置</el-button>
        </div>
        <div class="search-list">
            <el-table :data="goodsList" border :height="oHeight" header-cell-class-name="hdCellStyle" >
                <el-table-column
                    align="center"
                    prop="user_name"
                    label="姓名"
                    min-width="120"></el-table-column>
                <el-table-column
                    align="center"
                    prop="user_mobile"
                    label="电话"
                    min-width="120"></el-table-column>
                <el-table-column
                    align="center"
                    prop="goods_name"
                    label="商品名称"
                    min-width="150"></el-table-column>
                <el-table-column
                    align="center"
                    label="报名时间"
                    min-width="150">
                    <template slot-scope="scope">
                        <span>{{scope.row.signup_time*1000 | dateFormatter('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
				<el-table-column
                    align="center"
                    prop="address"
                    label="地区"
                    min-width="120"></el-table-column>
				<el-table-column
                    align="center"
                    prop="store_name"
                    label="报名店铺"
                    min-width="150"></el-table-column>
				<el-table-column
                    align="center"
                    label="报名渠道"
                    min-width="120"
					v-if="!externalData"
					#default="{ row }">
					{{parseInt(row.signup_channel) | source}}
					</el-table-column>
            </el-table>
            <div class="bottom">
                <div class="paginationOne">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchContent.currentPage"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="searchContent.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	import { resize } from "@/common/js/height.js";
	import {dateFormatter} from "../../../../common/js/util";

	export default {
		props: {
            externalData: { // 注意此属性不要删除，当此组件被单独引入第三方组件时候的父组件传值属性
				type: Object,
				default: null
			} 
		},
		data() {
			return {
				options: [
                    {label: '审核中', value: 3},
                    {label: '通过', value: 1},
                    {label: '未通过', value: 2}
                ],
				oHeight: 800,
                searchContent: {
                	goods_name:'',
	                store_name:'',
	                user_name:'',
	                user_mobile:'',
					address:'',
					putawayTime:'',
	                currentPage: 1,
	                pageSize: 10,
					originate: '',
                    filter_not_yt: null
                },
                goodsList: [],
				total: 0,
				needUnshelveGoods: null,
				dialogVisible: false,
				dialogMsg: ''
            }
		},
		filters: {
			source($n){
				switch ($n) {
					case 1:
						return 'IOS APP';
					case 2:
						return 'WeChat'; //微信单店废弃
					case 3:
						return 'Web';//PC端网站
					case 4:
						return 'WeChat';//微信官微
					case 5:
						return 'Business'; //一般指商家在4S后台操作录入,程序控制
					case 6:
						return 'H5';
					case 7:
						return 'Platform'; //平台运营人员在ADMIN后台操作录入,程序控制
					case 8:
						return 'Mini';//小程序
					case 9:
						return 'Android APP';
					case 10:
						return 'Alipay';
					case 11:
						return 'IOS H5';
					case 12:
						return 'Android H5';
					case 13:
						return 'Wxwork';
					default :
						return '未知';
				}
			}
		},
        methods: {
	        resetSearchData() {
		        this.searchContent.goods_name = '';
		        this.searchContent.store_name = '';
		        this.searchContent.user_name = '';
		        this.searchContent.user_mobile = '';
		        this.searchContent.address = '';
				this.searchContent.putawayTime = '';
	        },
	        search() {
		        this.searchContent.currentPage = 1;
		        this.getListData();
	        },
	        handleSizeChange(pageSize) {
		        this.searchContent.pageSize = pageSize;
		        this.searchContent.currentPage = 1;
		        this.getListData();
            },
	        handleCurrentChange(page) {
		        this.searchContent.currentPage = page;
		        this.getListData();
            },
	        getListData() {
		        var data = {};
		        data.page = this.searchContent.currentPage;
		        data.eachNum = this.searchContent.pageSize;
		        data.goods_name = this.searchContent.goods_name;
		        data.store_name = this.searchContent.store_name;
		        data.user_name = this.searchContent.user_name;
		        data.user_mobile = this.searchContent.user_mobile;
		        data.address = this.searchContent.address;
		        data.originate = this.searchContent.originate;
               if(this.searchContent.filter_not_yt) data.filter_not_yt = this.searchContent.filter_not_yt;
		        if (this.searchContent.putawayTime) {
		        	const putawayMS = this.searchContent.putawayTime[0].getTime();
		        	const endMS = this.searchContent.putawayTime[1].getTime();
		        	if (putawayMS == endMS) {
				        data.start_time = dateFormatter('YYYY-MM-DD HH:mm:ss', putawayMS);
				        data.end_time = dateFormatter('YYYY-MM-DD HH:mm:ss', endMS + (24 * 60 * 60 - 1) * 1000);
                    } else {
				        data.start_time = dateFormatter('YYYY-MM-DD HH:mm:ss', putawayMS);
				        data.end_time = dateFormatter('YYYY-MM-DD HH:mm:ss', endMS + (24 * 60 * 60 - 1) * 1000);
                    }
                }
		        var that = this;
		        this.$http.post('/admin/preferential_car/index.php?act=preferentialCar&op=signUpList', data).then(function(res) {
			        if (res.code == 1) {
				        if (res.data && res.data.list.length) {
					        /* that.goodsList = res.data.list.map(function(item) {
						        return {
							        id: item.id,
							        goodsName: item.goods_name,
							        headerImage: item.header_image,
                                    storeName: item.store_name,
							        carBrandName: item.car_brand_name,
							        putawayTime: item.putaway_time * 1000,
							        endTime: item.end_time * 1000,
							        checkStatus: item.audit_status,
							        putawayPrice: item.special_price * 1000,
							        stock: item.inventory,
                                    status: item.status
						        }
							}); */
							that.goodsList = res.data.list;
					        that.total = parseInt(res.data.totalNum);
				        } else {
					        that.goodsList = [];
					        that.total = 0;
				        }
			        }
			        else{
				        that.goodsList = [];
				        that.total = 0;
			        }
		        })
	        },
            setCheckStatus(goodsItem, checkStatus) {
	            this.$http.post('/admin/preferential_car/index.php?act=preferentialCar&op=auditGoods', {
	            	id: goodsItem.id,
                    audit_status: checkStatus
                }).then(res => {
                	if (res.code == 1) {
		                goodsItem.checkStatus = checkStatus
                    } else {
                		alert(res.msg)
                    }
                })
            },
	        setUp(goodsItem) {
	        	const goodsIndex = this.goodsList.findIndex(item => item.id == goodsItem.id)
		        this.goodsList.splice(goodsIndex, 1)
		        goodsItem.up = 1
		        this.goodsList.unshift(goodsItem)
            },
	        setDown(goodsItem) {
		        const goodsIndex = this.goodsList.findIndex(item => item.id == goodsItem.id)
		        this.goodsList.splice(goodsIndex, 1)
		        goodsItem.up = 0
		        this.goodsList.push(goodsItem)
	        },
	        unshelveGoods(goodsItem) {
		        this.$http.post('/admin/preferential_car/index.php?act=preferentialCar&op=pullOffShelves', {
			        id: goodsItem.id
		        }).then(res => {
			        if (res.code == 1) {
				        goodsItem.status = 2
			        } else {
				        alert(res.msg)
			        }
		        })
            },
	        showUnshelveDialog(goodsItem) {
		        this.needUnshelveGoods = goodsItem
		        this.dialogMsg = '此商品还未到下架时间，确认下架？';
		        this.dialogVisible = true;
	        },
	        handleClose() {
		        this.cancelUnshelve();
	        },
	        cancelUnshelve() {
		        this.dialogVisible = false;
		        this.dialogMsg = '';
		        this.needUnshelveGoods = null;
	        },
	        confirmUnshelve() {
		        this.unshelveGoods(this.needUnshelveGoods);
		        this.cancelUnshelve();
	        },
	        lookOverGoodsDetail(id) {
	        	this.$router.push(`/home/operate-panel/goods-management/goods-detail?id=${id}`)
            }
        },
        mounted() {
	        resize(this)
        },
		created() {
			if(this.externalData && this.externalData.filter_not_yt) {
				this.searchContent.originate = this.externalData.originate;
                this.searchContent.filter_not_yt = this.externalData.filter_not_yt
			}
			this.$parent.tabLists = [
				{"label": "特惠好车", "name": 'on-sale-good-car'},
				{"label": "报名信息", "name": 'reg-info'}
			]
			this.getListData();
		},
		name: "reg-info"
	}
</script>

<style lang="scss" scoped>
    .reg-info {
        .search-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            &-input {
                width: 200px;
            }
            .putaway-time-wrapper {
                .putaway-time-label {
                    font-size: 14px;
                }
                display: flex;
                align-items: center;
                /deep/.el-range-separator {
                    box-sizing: content-box;
                }
            }
        }
    }
    .yes {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url("./img/yes.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
    }
    .yes-highlight {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url("./img/yes-highlight.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
    }
    .no {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url("./img/no.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        margin-left: 15px;
    }
    .no-highlight {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url("./img/no-highlight.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        margin-left: 15px;
    }
    .check-ing {
        color: #FC303D;
    }
    .check-pass {
        color: #189AF9;
    }
    .check-not-pass {
        color: #9D9D9D;
    }
</style>